<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="12">
				<el-row :gutter="24">
					<el-col :span="24">
						<el-table :data="tableData.dataList" height="300" border style="width: 100%; align-content: center;">
							<el-table-column label="车系" align="center" prop="carSeries">
							</el-table-column>
							<el-table-column label="待入库" align="center" prop="a">
							</el-table-column>
							<el-table-column label="财务待出库" align="center" prop="b">
							</el-table-column>
							<el-table-column label="车辆待出库" align="center" prop="c">
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="12">
				<div id="charts">
					<div id="week0utCar" :style="{width:'100%',height:'300px'}"></div>
				</div>
			</el-col>
		</el-row>
		<!--<el-row :gutter="24">
			<el-col :span="12">
				<el-row :gutter="24">
					<el-col :span="24">
						<div id="charts">
							<div id="invertoryCar" :style="{width:'100%',height:'300px'}"></div>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="12">
				<div id="charts">
					<div id="outStandCar" :style="{width:'100%',height:'300px'}"></div>
				</div>
			</el-col>
		</el-row>-->
		<el-row :gutter="24">
			<el-col :span="12">
				<el-card style="width: 100%;">
					<div slot="header">
						<span style="line-height: 16px;">调拨审批</span>
					</div>
					<div v-for="(list,index) in shenopTableDate.dataList" style="width: 90%;font-size: 14px; padding: 9px 0;">
						[{{list.uName}}]申请[{{saleStatusCov(list,index)}}][{{list.currentApprovalStatus}}]
					</div>
				</el-card>
			</el-col>

		</el-row>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//库存提醒
				tableData: {
					total: 0,
					dataList: []
				},
				//销售周报
				miant: {
					queryDate: [],
					cout: [],
					fout: [],
					fin: [],
				},
				//在途车辆
				wayDate: {
					carSerices: [],
					value: [],
				},
				//出库报表
				outDate: {
					调拨待出库: "",
					销售待出库: "",
					财务待出库: "",
				},
				//销售周报
				getWeekDate: [],
				//在途车辆
				getWayDate: [],
				//出库报表
				getOutDate: [],
				//审批查询条件
				condition: {
					enterType: "",
					carModel: "",
					wareHouse: "",
					enterTimeStart: "",
					enterTimeStop: "",
				},
				//				condition: {
				//					allocationStatus: "",
				//					applicationStartDate: "",
				//					applicationStopDate: "",
				//					fromWarehouse: "",
				//					aimWarehouse: "",
				//				},
				//审批列表
				shenopTableDate: {
					total: 0,
					dataList: []
				},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
			}
		},
		methods: {
			//销售车辆周报
			mounteds: function() {
				// 基于准备好的dom，初始化echarts实例
				if(document.getElementById('week0utCar') == null) {
					return;
				}
				var myChart = echarts.init(document.getElementById('week0utCar'));
				// 销售周报
				var option = {
					title: {
						text: '销售周报',
					},
					legend: {
						data: ['实物出库', '财务出库', '财务入库']
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: this.$data.miant.queryDate,
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [{
						name: '实物出库',
						type: 'line',
						data: this.$data.miant.cout,
						markPoint: {
							data: [{
								type: 'max',
								name: '最大值'
							}],
							symbolSize: [40, 40],
						}
					}, {
						name: '财务出库',
						type: 'line',
						data: this.$data.miant.fout,
						markPoint: {
							data: [{
								type: 'max',
								name: '最大值'
							}],
							symbolSize: [40, 40],
						}
					}, {
						name: '财务入库',
						type: 'line',
						data: this.$data.miant.fin,
						markPoint: {
							data: [{
								type: 'max',
								name: '最大值'
							}],
							symbolSize: [40, 40],
						}
					}]
				};
				myChart.setOption(option);
			},
			//在途车辆
			mountedWay: function() {
				// 基于准备好的dom，初始化echarts实例
				if(document.getElementById('invertoryCar') == null) {
					return;
				}
				var myChart = echarts.init(document.getElementById('invertoryCar'));
				// 销售周报
				var option = {
					title: {
						text: '在途车辆',
					},
					legend: {
						data: ['在途车辆']
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: [{
						type: 'category',
						data: this.$data.wayDate.carSerices,
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [{
						name: '在途车辆',
						type: 'bar',
						data: this.$data.wayDate.value,
					}]
				};
				myChart.setOption(option);
			},
			//出库车辆
			mountedOut: function() {
				// 基于准备好的dom，初始化echarts实例
				if(document.getElementById('outStandCar') == null) {
					return;
				}
				var myChart = echarts.init(document.getElementById('outStandCar'));
				// 销售周报
				var option = {
					title: {
						text: '出库车辆',
					},
					legend: {
						data: ['出库车辆']
					},
					tooltip: {
						trigger: 'axis'
					},
					yAxis: [{
						type: 'category',
						data: this.$data.outDate.carSerices,
					}],
					xAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [{
						name: '在途车辆',
						type: 'bar',
						data: this.$data.outDate.value,
					}]
				};
				myChart.setOption(option);
			},
			//销售周报查询
			weekQuery: function() {
				this.$http.get(this.API_ROOT + '/scm/cockpit/carWeek', {
					params: {}
				}).then(resp => {
					if(resp.data.success) {
						this.$data.getWeekDate = resp.data.dataList;
						for(var i = 0; i < this.$data.getWeekDate.length; i++) {
							//debugger;
							this.$data.miant.queryDate[i] = this.moment(this.$data.getWeekDate[i].QueryDate).format("MM-DD");
							this.$data.miant.cout[i] = this.$data.getWeekDate[i].cout;
							this.$data.miant.fout[i] = this.$data.getWeekDate[i].fout;
							this.$data.miant.fin[i] = this.$data.getWeekDate[i].fin;
						}

						//debugger;
						this.mounteds();
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},
			//在途车辆查询
			inventoryQuery: function() {
				this.$http.get(this.API_ROOT + '/scm/cockpit/carOnWay', {
					params: {}
				}).then(resp => {
					if(resp.data.success) {
						this.$data.getWayDate = resp.data.dataList;
						for(var i = 0; i < this.$data.getWayDate.length; i++) {
							//	debugger;
							this.$data.wayDate.carSerices[i] = this.$data.getWayDate[i].carSeries;
							this.$data.wayDate.value[i] = this.$data.getWayDate[i].value;
						}
						//debugger;
						this.mountedWay();
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},
			//待出库车辆
			outQuery: function() {
				this.$http.get(this.API_ROOT + '/scm/cockpit/carOutStandBy', {
					params: {}
				}).then(resp => {
					if(resp.data.success) {
						this.$data.getOutDate = resp.data.dataList;
						this.$data.outDate.carSerices = this.$data.getOutDate.name;
						this.$data.outDate.value = this.$data.getOutDate.count;
						this.mountedOut();
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},
			//调拨审批列表
			shenopQuery: function() {
				//debugger;
				this.$http.post(this.API_ROOT + '/scm/allocationOrder/approvalPage', this.$data.condition, {
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$data.shenopTableDate = resp.data;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//待处理车辆列表
			waitQuery: function() {
				this.$http.get(this.API_ROOT + '/scm/cockpit/carStockHint', {
					params: {}
				}).then(resp => {
					if(resp.data.success) {
						this.$data.tableData = resp.data;
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},
			//是否在售状态转换
			saleStatusCov: function(row, column) {
				var temp = "";
				switch(row.allocationType) {
					case '0':
						temp = "二网调拨";
						break;
					case '2':
						temp = '临时调拨';
						break;
					case "1":
						temp = '外展调拨';
						break;
					default:
						''
						break
				};
				return temp;
			},
		},
		created: function() {
			this.waitQuery();
			this.shenopQuery();
		},
		mounted: function() {
			this.weekQuery();
			this.inventoryQuery();
			this.outQuery();
		},
	}
</script>
<style>

</style>